#{extends 'frame.html' /} 
#{set title:'发布微代任务' /} 
#{set 'moreStyles'}
<link rel="stylesheet" media="screen" href="@{'/public/stylesheets/task-publish.css'}" />
<link rel="stylesheet" media="screen" href="@{'/public/stylesheets/tipsy.css'}" />
<link rel="stylesheet" media="screen" href="@{'/public/stylesheets/datePicker.css'}" />
<style type="text/css">
.title {width: 80px; text-align: right; }
.short {width: 180px } 
.shareImg{width:100px;height:100px;margin-right:10px}
.shareImg{background-image: url("@{'public/images/select.png'}");background-position: center;}
.tip{display:inline-block;background-size:100% 100%;background-image: url("@{'/public/images/ttt.png'}");width:24px;height:24px;margin-top:5px;}
.tipsy-inner{max-width: 400px;background: none;color:red}
.tipsy-arrow-w{border:none}
</style>
#{/set} #{if msg}
<div class="contentCard">
	<div class="contentTitle">
		<span class="iconfont">&#xf00b7;</span> 提示
	</div>
	<div class="contentBody">
		<div class="errBox">
			<div class="panelLine">
				<span>您目前暂时无法发布新任务，原因如下：</span>
			</div>
			<div class="panelLine">
				#{if user.status.toString()=='ACTIVE'} <span class="bold">需要先开通VIP会员~~</span>
				<span> <a href="/user/member">[立即开通]</a>
				</span> #{/if} #{elseif user.status.toString()=='INVALID'} <span
					class="bold">您的VIP会员身份已过期~~</span> <span> <a
					href="/user/member">[立即续费]</a>
				</span> #{/elseif} #{else} <span class="bold">${msg}~~</span> #{/else}
			</div>
		</div>
	</div>
</div>
#{/if}

<form id="form">
	#{authenticityToken /}
	<div class="contentCard">
		<div class="contentTitle">任务进度</div>
		<div class="contentBody" style="padding: 20px 40px;">
			<div class="stepWrapper mt30">
				<div class="stepWaiting"
					style="position: absolute; top: 0; left: -5px;">
					<div class="stepOn">1</div>
					<div class="caption" style="width: 72px; margin-left: -36px;">填写基本信息</div>
				</div>
				<div class="stepWaiting" style="margin-left: 46%;">
					<div class="" id="stepTow">2</div>
					<div class="caption" style="width: 72px; margin-left: -36px;">费用支付</div>
				</div>
				<div class="stepWaiting"
					style="position: absolute; top: 0; right: -5px;">
					3
					<div class="caption" style="width: 48px; margin-left: -24px;">任务发布审核</div>
				</div>
			</div>
		</div>
	</div>

	<div class="contentCard stepCard taskStep-1">
		<div class="contentTitle">任务基本信息</div>
		<div class="contentBody">
			<div class="secondTile">填写商品信息</div>
			<div class="panelBox" style="border-bottom: dashed 1px #DEDEDE;">
				<input type="hidden" name="taskId" id="taskId" value="${task?.id}"/>
				<div class="panelLine sec">
					<span class="ls floatLeft title"> 商品链接 <span class="red bold">*</span> </span> 
					<input type="text" class="inputText floatLeft ls long required" id="txtItemUrl" name="itemUrl" value="${task?.itemUrl}" placeholder="商品连接"/>
				</div>
				<div class="panelLine sec">
					<span class="ls floatLeft title"> 商品标题 <span class="red bold">*</span> </span> 
					<input type="text" class="inputText floatLeft ls long required" id="txtItemTitle" name="itemTitle" value="${task?.itemTitle}"  placeholder="商品标题"/>
				</div>
				<div class="panelLine sec">
					<span class="ls floatLeft title"> 商品主图 <span class="red bold">*</span> </span> 
					<input type="text" class="inputText floatLeft ls long required" id="txtItemPicUrl" name="itemPicUrl" value="${task?.itemPic}" itemPic="${task?.itemPic}"  placeholder="商品主图"/> 
					<input type="button" id="itemUploadBtn" value="上传产品主图" />
				</div>
				<div class="pic-box" id="" style="padding-left: 94px">
					<img id="itemImg" name="itemImg" src="${task?.itemPic}" />
				</div>

				<div class="panelLine sec">
					<span class="ls floatLeft title"> 购买价格 <span class="red bold">*</span> </span> 
					<input type="text" class="inputText floatLeft ls short required " id="txtItemPrice" name="itemPrice" value="${task!=null?(task?.itemPrice/100.0f).format('##0.00'):''}" placeholder="购买价格"
						/>
                    <a href="javascript:void(0)" style="color:red"  class="tip" title="购买价格是指订单成交价，如有优惠券或者其他活动，可在文案中备注。"></a>

				</div>

				<div class="panelLine sec">
					<span class="ls floatLeft title"> 分销佣金 <span class="red bold">*</span> </span>
					<input type="text" class="inputText floatLeft ls short required " id="txtCashback" name="cashback" value="${task!=null?(task?.cashback/100.0f).format('##0.00'):''}" placeholder="代销返佣"
                           title="佣金越高，卖的越多"
					/>
                    <a href="javascript:void(0)" style="color:red"  class="tip" title="佣金越高，卖的越多"></a>
				</div>

				<div class="panelLine sec">
					<span class="ls floatLeft title"> 任务数量 <span class="red bold">*</span> </span> 
					<input type="text" class="inputText floatLeft ls short required" id="txtTotalShareCount" name="totalShareCount" value="${task?.totalShareCount}" placeholder="任务数量（100单起）"/>
				</div>

				<div class="panelLine sec">
					<span class="ls floatLeft title"> 计划销售数量 <span class="red bold">*</span> </span>
					<input type="text" class="inputText floatLeft ls short required" id="txtTotalOrderCount" name="totalOrderCount" value="${task?.totalOrderCount}" placeholder="预计销售数量（100单起）"/>
                    <a href="javascript:void(0)" style="color:red"  class="tip" title="计划销售数量是指商家计划此次任务的总共分销数量，计划销售数量不能小于任务数量，平台会收取（预计销售数量*分销佣金）作为佣金押金。"></a>
				</div>

				<div class="panelLine sec">
					<span class="ls floatLeft title"> 分享截止时间 <span class="red bold">*</span> </span> 
					<input type="text" class="inputText floatLeft ls short required inputDate " id="txtShareDeadline" name="shareDeadline" value="${task?.shareDeadline?.format('yyyy-MM-dd')}" placeholder="分享截止时间"
						   title=""
					/>
                    <a href="javascript:void(0)" style="color:red"  class="tip" title="分享截止时间是指该任务的领取时间限制，这主要是配合你活动的时间安排。"></a>
				</div>

				<div class="panelLine sec">
					<span class="ls floatLeft title"> 订单截止时间 <span class="red bold">*</span> </span> 
					<input type="text" class="inputText floatLeft ls short required inputDate " id="txtOrderDeadline" name="orderDeadline" value="${task?.orderDeadline?.format('yyyy-MM-dd')}" placeholder="订单截止时间 "
						   title="订单截止时间是指买手分销的时间限制，是为了控制分销尽快帮您销售产品，一般建议设置为15天以上，注意，订单截止时间必须大于分享截止时间。"
					/>
                    <a href="javascript:void(0)" style="color:red"  class="tip" title="订单截止时间是指买手分销的时间限制，是为了控制分销尽快帮您销售产品，一般建议设置为15天以上，注意，订单截止时间必须大于分享截止时间。"></a>
					<span style="clear:both"></span>
				</div>
			</div>
			
			<div class="secondTile">填写文案 <span style="color:red"><a href="/notice/23">查看案例</a></span></div>
			<div class="panelBox" style="border-bottom: dashed 1px #DEDEDE;">
				<div class="panelLine sec" style="height:130px;">
					<span class="ls floatLeft title "> 分享文案 <span class="red bold">*</span> </span> 
					<textarea class="inputText floatLeft ls required" name="shareText" id="txtShareText" style="width:400px;height:100px;" placeholder="分享文案">${task?.shareText}</textarea>	
				</div>
				#{if task?.shareImageUrls!=null }
				<div class="panelLine sec" style="height:auto;" id="shareImgDiv">
					<span class="ls floatLeft title"> 方案图 <span class="red bold">*</span> </span> 
					#{list items:task?.shareImageUrls?.split(','),as:'pic'}
					<img src="${pic}" id="shareImg${pic_index+1}" class="shareImg"/>
					#{/list}
				</div>
				#{/if}
				#{else}
				<div class="panelLine sec" style="height:auto;" id="shareImgDiv">
					<span class="ls floatLeft title"> 方案图 <span class="red bold">*</span> </span> 
					<img src="" id="shareImg1" class="shareImg"/>
				</div>
				#{/else}
				<a class="plusBlockBtn" id="addImg" style="margin-left:90px;" href="javascript:;" on="tb"> 
					<i class="iconfont" style="font-size: 20px;">󰅔</i>
					<span>点击增加一张图片（最多可增加9张图片）</span>
				</a>
				<div class="panelLine sec" style="height:130px;">
					<span class="ls floatLeft title"> 其它要求 </span> 
					<textarea class="floatLeft" style="width:400px;height:100px;" name="other" id="txtOther" placeholder="其它要求">${task?.other}</textarea>	
				</div>
			</div>
			
			<div class="buttonSection">
				 <a href="javascript:;" class="stdColorButton " id="next">下一步 <span class="iconfont">&#xf016d;</span></a>
			</div>
		</div>
		</div>
		
		<div class="contentCard stepCard taskStep-2" style="display:none">
			<div class="contentTitle">支付</div>
			<div class="contentBody">
				<table class="normTable">
					<tr>
						<td colspan="3" style="text-align: left"><span style="font-weight: bold;font-size:16px;">任务押金</span></td>
					</tr>
					<tr>
						<td style="text-align: left">预计销售数量：<span class="totalOrderCount">0</span>单</td>
						<td style="text-align: left">代销返佣:<span class="cashback">0</span>元</td>
						<td style="text-align: left;color:#ff6e34;">合计：<span class="totalOrderCount">0</span>单×<span class="cashback">0</span>元=<span class="totalCashback">0</span>元</td>
					</tr>
					<tr>
						<td colspan="3" style="text-align: left"><span style="font-weight: bold;font-size:16px;">任务佣金</span></td>
					</tr>
					<tr>
						<td style="text-align: left">任务数量：<span class="totalShareCount">0</span>单</td>
						<td style="text-align: left">任务佣金:<span class="baseCommission">0</span>元</td>
						<td style="text-align: left;color:#ff6e34;">合计：<span class="totalShareCount">0</span>单×<span class="baseCommission">0</span>元=<span class="totalCommission">0</span>元</td>
					</tr>
				</table>
				
				<div class="totalcostBox secondTile" style="color:#000;">
				<span class="floatRight">费用总计：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<span class="ls">押金：
						<span class=" red bold spRow-total-1 mr4 ml4 totalCashback">0.00</span>元，佣金：
						<span class=" red bold spRow-total-4 mr4 ml4 totalCommission">0.00</span>个
					</span>
				</span>
				</div>
				<div class="secondTile">选择支付方式</div>
				<div class="panelBox" id="payType">
					<div class="panelLine sec">
						<input class="rad ls floatLeft ingot" type="checkbox" name="r_pay_type"checked="checked" />
						<span class="floatLeft ls ">
							使用金币支付（可用金币：
							<span class="red bold ingot seller">${(user?.ingot/100).format("##0.00")}</span>
							个，1个金币价值为1元）
						</span>
					</div>
					<div class="panelLine sec">
						<input class="rad ls floatLeft pledge" type="checkbox" name="r_pay_type" checked="checked"/>
						<span class="floatLeft ls ">
							使用押金支付（可用押金
							<span class="red bold pledge">${(user?.pledge/100).format("##0.00")}</span>
							元）
						</span>
					</div>
                    <div class="">
                        余额不够用？可先充值再放单，现在就去充值<span class=" ls red "><a href="/user/money" class="red">「我要充值」</a></span>
                    </div>
				</div>
				
				<div class="buttonSection">
					 <a href="javascript:;" class="stdColorButton prev" id="prev"> <span class="iconfont">&#xf016e;</span>上一步</a>
					 <a href="javascript:;" class="stdColorButton " id="pay">确认支付<span class="iconfont">&#xf016d;</span></a>
				</div>
			</div>
		</div>
		
		<div class="popWrapper" style="display: none;" id="tr_loading_mask">
				<div class="maskLayer"></div>
				<img class="tr_juhua" src="@{'/public/images/pre_loading.gif'}" />
		</div>
</form>

<!-- 开通会员后才能发布任务 -->
#{if user.status.toString()=='VALID'} 
	#{set 'moreScripts'}
		<script src="@{'/public/javascripts/date.js'}" type="text/javascript"></script>
		<script src="@{'/public/javascripts/jquery.datePicker.js'}" type="text/javascript"></script>
		<script src="@{'/public/javascripts/plupload/plupload.full.min.js'}" type="text/javascript"></script>
		<script src="@{'/public/javascripts/qiniu.min.js'}" type="text/javascript"></script>
		<script src="@{'/public/javascripts/mustache.min.js'}" type="text/javascript"></script>
		<script src="@{'/public/javascripts/jquery.tipsy.js'}" type="text/javascript"></script>
		<script src="@{'/public/javascripts/jquery.number.min.js'}" type="text/javascript"></script>
		<script type="text/javascript"> App.flowNum = "${user.flow}" </script>
		<script src="@{'/public/javascripts/task/publish-wd.js'}" type="text/javascript"></script>
		<script type="text/javascript">
			App.module = 'publishWdTask';
		</script>
	#{/set} 
#{/if}
